@use "../../app.scss" as *;

.ai-match-page {
  width: 100%;
  min-height: 100vh;
  background: $background-color;

  .container {
    padding: 24px 16px;
  }

  .header {
    margin-bottom: 24px;

    .title {
      font-size: 32px;
      font-weight: 500;
      color: $text-color;
      margin-bottom: 12px;
    }

    .desc {
      font-size: 26px;
      color: $text-color-secondary;
    }
  }

  .match-card {
    background: $card-background;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    .match-title {
      font-size: 28px;
      font-weight: 500;
      color: $text-color;
      margin-bottom: 16px;
    }

    .match-content {
      font-size: 26px;
      color: $text-color-secondary;
      line-height: 1.6;
    }

    .match-button {
      margin-top: 20px;
      width: 100%;
      height: 88px;
      line-height: 88px;
      text-align: center;
      background: $primary-color;
      color: #fff;
      border-radius: 44px;
      font-size: 30px;
      font-weight: 500;

      &:active {
        background: $primary-color-dark;
      }
    }
  }
}
